<template>
  <div class="grid-demo">
    <h3 class="title">基础排版</h3>
    <div class="demo-1">
      <d-row>
        <d-col :width="6"><div class="bg-gray-color"></div></d-col>
        <d-col :width="6"><div class="bg-gray2-color"></div></d-col>
        <d-col :width="6"><div class="bg-gray3-color"></div></d-col>
        <d-col :width="6"><div class="bg-gray4-color"></div></d-col>
      </d-row>
    </div>
    <h3 class="title">区块间隔</h3>
    <div class="demo-2">
      <d-row :space="9">
        <d-col v-for="n in 8" :key="n" :width="6"><div>{{ n }}</div></d-col>
        <d-col :width="24"><div>Top</div></d-col>
        <d-col :width="6"><div>Left</div></d-col>
        <d-col :width="18"><div>Right</div></d-col>
        <d-col :width="18"><div>Left</div></d-col>
        <d-col :width="6"><div>Right</div></d-col>
      </d-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'gridDemo'
}
</script>

<style lang="stylus" scoped>
.grid-demo
  .demo-1 .d-row>div>div
    height 30px
  .demo-2 .d-row>div>div
    padding 8px
    color #ffffff
    border-radius 3px
    text-align center
    background-color #c1c1c1
</style>
